<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div v-for="(item, index) in list">{{i}}: {{item}}</div> // 迭代数组
    <div v-for="(val, key, index) in obj">{{i}}: {{item}}</div> // 迭代对象
    <div v-for="count in 10">从1到10</div> // 迭代数字
    <!-- 注意：在vue2.2.0+版本里，使用v-for时必须有key  -->
    <!-- 原因：赋予唯一key属性，打破“就地复用”原则 -->
    <!-- key只能绑定string、number类型，不然会报错 -->
    <div v-for="item in list" :key="item.id"></div>


    <button @click="flag=!flag">toggle</button> // 可以减少写事件
    <div v-if="flag">111</div> // 每次都会删除或创建元素
    <div v-show="flag">1121</div> // 切换display样式
    
    <input type="text" v-model="name"> // 搜索关键字
    <div v-for="item of getList(name)">{{item}}</div> 
    <div>{{item | 过滤器名称}}</div>
    <div id="app">
        {{ msg | changeMsg('hh') | test}} // 可以使用多个过滤器
    </div>
    <div id="app2">
        {{ msg | changeMsg('hh')}}
        <button @keyup.113="add">点击F2键就会触发事件</button>
    </div>
    <script>
        // 第一个data就是指msg 第二个才是changeMsg的参数
        Vue.filter('changeMsg', function(data, hh) {
            return data.replace(/11/g, 'ss') + hh;
        }) // 全局替换含有11的值 => ss
        Vue.filter('test', function(data, sd) {
            return data + sd;
        })
        var vm = new Vue({
            data: {
                msg: '111'
            }
        })
        // 
        var vm2 = new Vue({
            data: {
                msg: '111'
            },
            filters: { // 私有过滤器
                changeMsg: function(data, sd) {
                    return data + sd;
                }
            }
        })

        Vue.directive('focus', { // 全局定义自定义指令
            // 钩子函数
            bind:function() {}
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '111',
            },
            methods: {
                show() {
                    console.log('show');
                }
            },
            beforeCreate() { // 实例完全创建前执行,原因：此时，data及methods中的数据还没有初始化
                console.log(this.msg); // undefined
                this.show(); // is no function 
            },
            created() { // 实例完全创建后执行,原因： 此时data及methods中的数据已初始化
                console.log(this.msg); // 111
                this.show(); // show
            },
            beforeMount() { // 模板已经在内存中编译完成，但还未挂载到页面中去
                console.log(document.getElementById('title').innerText); // {{msg}}
                // 如果此时我们打印，挂载内容中的节点内容，显示的是插值表达式形式
                // 这意味着当前还没有将data中数据 去替换 插值表达式及v-model的内容
            }, 
            mounted() { // 内存中的模板已经挂载到页面中去(实例已经被完全创建)
                console.log(document.getElementById('title').innerText); // 111
            },
            beforeUpdate() { // data中的数据发生改变，但页面还没有更新
                console.log(document.getElementById('title').innerText); // 111
                console.log(this.msg); // 我们通过点击事件 将 msg => 222
                // 此时页面上的数据与data尚未保持同步
            },
            updated() { // 此时页面已经更新渲染完成，页面上的数据与data保持一致
                console.log(document.getElementById('title').innerText); // 222
                console.log(this.msg); // 222
            },
            beforeDestroy() { // 实例上的数据即将被销毁，现在还可用
                console.log(this.msg); // 222
                this.show(); // show
            },
            destroyed() { // 实例上的数据已经被销毁，全部无法再使用
                console.log(this.msg); // undefined
                this.show(); // is no function 
            }
        })
    </script>
</body> 
</html>